<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>绑定函数-作为构造函数使用的绑定函数</title>
        <style>
            .notify{
                box-sizing:border-box;
                padding: 10px;
                border-left: 5px solid #e66465;
                background-color: #ffe7e8;
                margin-bottom: 20px;
            }
            .notify strong{
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <h1>绑定函数-配合setTimeout</h1>
        <p>来源:<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind</a></p>
        <p class="notify">
            <strong>警告</strong> :这部分演示了 JavaScript 的能力并且记录了 bind() 的超前用法。以下展示的方法并不是最佳的解决方案且可能不应该用在任何生产环境中。
        </p>
        <script>
            function Point(x, y) {
              this.x = x;
              this.y = y;
            }

            Point.prototype.toString = function() { 
              return this.x + ',' + this.y; 
            };

            var p = new Point(1, 2);
            p.toString(); // '1,2'

            var emptyObj = {};
            var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
            // 以下这行代码在 polyfill 不支持,
            // 在原生的bind方法运行没问题:
            //(译注：polyfill的bind方法如果加上把bind的第一个参数，即新绑定的this执行Object()来包装为对象，Object(null)则是{}，那么也可以支持)
            var YAxisPoint = Point.bind(null, 0/*x*/);

            var axisPoint = new YAxisPoint(5);
            axisPoint.toString(); // '0,5'

            axisPoint instanceof Point; // true
            axisPoint instanceof YAxisPoint; // true
            new Point(17, 42) instanceof YAxisPoint; // true
            // 仍然能作为一个普通函数来调用
            // (即使通常来说这个不是被期望发生的)
            YAxisPoint(13);

            emptyObj.x + ',' + emptyObj.y;   //  '0,13'
        </script>
    </body>
</html>